<template>
  <div id="todayOut" />
</template>

<script>
import { getTodayOutByCategory } from '@/api/graph'
export default {
  name: 'TodayOutByCategory',
  data() {
    return {
      option: {
        title: {
          text: '今日出货量按类别分类'
        },
        xAxis: {
          type: 'category',
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            data: [],
            type: 'bar',
            showBackground: true,
            backgroundStyle: {
              color: 'rgba(180, 180, 180, 0.2)'
            }
          }
        ]
      }
    }
  },
  mounted() {
    this.getBarData()
  },
  methods: {
    getBarData() {
      const params = JSON.parse(JSON.stringify(this.option))
      const myChart = this.$echarts.init(document.getElementById('todayOut'))
      getTodayOutByCategory().then(response => {
        const { content } = response

        // const obj = {
        //   'sum': 100,
        //   'category': '饮料'
        // }
        // content.push(obj)
        console.log(content)
        const data = []
        const len = content.length
        for (let i = 0; i < len; i++) {
          data.push(content[i]['category'])
          params['series'][0]['data'].push(content[i]['sum'])
        }
        params['xAxis']['data'] = data
        console.log(params)
        myChart.setOption(params)
      })
    }
  }
}
</script>

<style scoped>
#todayOut {
  width: 500px;
  height: 500px;
}
</style>
